<span class="page-title"><i class="fa fa fa-users"></i> Users </span>

<!-- Main content -->
<section class="content" data-ng-init="ctrl.init()">

    <div class="row">

        <div class="col-md-3">
            <div class="box box-primary">
                <div class="box-body box-profile">
                    <form ng-submit="ctrl.save(model)">

                        <a href="javascript:void(0)" ng-click="editUser=true" class="">
                            <img class="profile-user-img img-responsive img-circle" src="/images/icons/medium/add-user.png" alt="User profile picture">
                            <h3 class="text-center">Register User</h3>
                        </a>

                        <input type="hidden"  autocomplete="false" ng-model="model.id" />

                        <div ng-show="editUser == true">
                            <ul class="list-group list-group-unbordered">
                                <li class="list-group-item">
                                    <div class="has-feedback">
                                        <input type="text" class="form-control" placeholder="Email / User Name" autocomplete="false" ng-model="model.username" required="required"/>
                                        <span class="form-control-feedback"><i class="fa fa-user"></i></span>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="has-feedback">
                                        <input type="password" class="form-control" placeholder="Password" autocomplete="false" ng-model="model.password" required="required"/>
                                        <span class="form-control-feedback"><i class="fa fa-key"></i></span>
                                    </div>
                                </li>
                            </ul>
                            <button type="submit" class="btn btn-primary btn-block">Save</button>
                        </div>
                    </form>
                </div>
                <!-- /.box-body -->
            </div>

            <div class="box box-primary">
                <div class="box-body box-profile">
                    <form>

                        <h3 class="profile-username text-center">Invite User</h3>

                        <ul class="list-group list-group-unbordered">
                            <li class="list-group-item">
                                <div class="has-feedback">
                                    <input type="text" class="form-control" placeholder="Email" autocomplete="false" disabled ng-model="inviteEmail" required="required"/>
                                    <span class="form-control-feedback"><i class="fa fa-envelope"></i></span>
                                </div>
                            </li>
                        </ul>
                        <div class="btn-group btn-group-justified">
                            <a role="button" class="btn btn-primary" disabled>Send</a>
                            <a role="button" class="btn btn-warning" ng-click="ctrl.invitationLink()">Get Link</a>
                        </div>
                    </form>
                </div>
                <!-- /.box-body -->
            </div>

            <div class="box box-primary">
                <div class="box-body box-profile">
                    <form>
                        <h3 class="profile-username text-center">Api Keys</h3>

                        <div class="btn-group btn-group-justified">
                            <a role="button" class="btn btn-primary" data-target="#show-apikey" data-toggle="modal" ng-click="ctrl.showApiKeys()">Show</a>
                        </div>
                    </form>
                </div>
                <!-- /.box-body -->
            </div>
        </div>



        <div class="col-md-9">

            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">Registred Users <span ng-if="ctrl.accounts.length > 0">(Current Account)</span> </h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <th>Username</th>
                            <th>Creation</th>
                            <th>Update</th>
                            <th>Last Login</th>
                            <th>Actions</th>
                        </tr>
                        <tr ng-repeat="x in ctrl.users">
                            <td>${ ::x.username }</td>
                            <td>${ ::x.creationDate | date:'medium' }</td>
                            <td>${ ::x.updateDate | date:'medium' }</td>
                            <td>${ ::x.lastLogin | date:'medium' }</td>
                            <td>
                                <button type="button" class="btn btn-xs btn-warning" ng-click="ctrl.editUser(x, $index)"><i class="fa fa-edit"></i> Edit</button>
                                <button type="submit" class="btn btn-xs btn-danger" ng-really-click="ctrl.deleteUser(x, $index)"><i class="fa fa-remove"></i> Delete</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>


            <div class="box box-info" ng-if="ctrl.accounts.length > 0">
                <div class="box-header with-border">
                    <h3 class="box-title">All Registred Accounts</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <th>Username</th>
                            <th>Creation</th>
                            <th>Update</th>
                            <th>Users</th>
                            <th>Actions</th>
                        </tr>
                        <tr ng-repeat="x in ctrl.accounts">
                            <td>${ ::x.username }</td>
                            <td>${ ::x.creationDate | date:'medium' }</td>
                            <td>${ ::x.lastLogin | date:'medium' }</td>
                            <td>${ ::x.users }</td>
                            <td>
                                <!--<button type="button" class="btn btn-xs btn-warning" ng-click="ctrl.edit(x, $index)"><i class="fa fa-edit"></i> Edit</button>-->
                                <button type="submit" class="btn btn-xs btn-danger" ng-really-click="ctrl.delete(x, $index)"><i class="fa fa-remove"></i> Delete</button>
                                <button  class="btn btn-xs btn-info" ng-really-click="ctrl.loginAs(x, $index)" ng-really-message="Login as User ?" title="Login"><i class="fa fa-key"></i> Login</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>

    <!----------------------------------------------------------------->
    <!-- ApiKeys                                                   -->
    <!----------------------------------------------------------------->
    <div id="show-apikey"  class="modal fade" tabindex="-1" role="dialog" >
        <div class="modal-dialog" role="document">
            <form class="form-horizontal">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" >ApiKeys</h4>
                    </div>
                    <div class="modal-body">

                        <div class="row" ng-repeat="x in ctrl.keys">
                            <div class="col-md-4 vcenter" >
                                <img src='https://chart.googleapis.com/chart?cht=qr&chl="+${ ::x.qrcode }+"&chs=200x200' />
                            </div>
                            <div class="col-md-7 vcenter" >
                                <h3>AppID: <code>${ ::x.appName }</code></h3>
                                <h3>Key:  <code>${ ::x.key }</code></h3>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</section>
